<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    @media(max-width:399px){
        html{
            font-size: 12px;
        }
    }
     @media(max-width:540px){
        html{
            font-size: 14px;
        }
    }
     @media(max-width:700px){
        html{
            font-size: 16px;
        }
    }
    html{
        font-size: 16px;

    }
    body{
        margin: 0px;
        padding: 0px;
    }
    header{
        height: 80px;
        background: skyblue;
    }
    header h1{
        font-weight: bold;
        font-family: "微软雅黑";
        text-align: center;/**/
        line-height: 5rem;/*行高*/
        margin: 0px;
        text-shadow: 0 0 2px #000;/*文字加阴影*/
    }
    .storeInfo .storeInfoLeft{
        float: left;
        widows: 30%;
        margin-right: 3rem;
        margin-left: 0.5rem;
        margin-top: 1.5rem;
    }
     .storeInfo .storeInfoRight{
        float: left;
        widows: 65%;
    }
      .storeInfo .storeInfoRight div{
    margin-bottom: 0.5rem;
        
    }
    .storeInfo .storeInfoRight .storeInfoName{
        font-size: 2rem;
    }
    .storeInfo .storeInfoRight .storeHonor{
        font-size: 1.2rem;
    }
    .storeInfo .storeInfoRight .storeButton div{
        width: 6rem;
        height: 2rem;
        background: skyblue;
        color: white;
        display: inline-block;
        line-height: 2rem;
        text-align: center;
        border-radius: 5px;
    }
  .scope{
      min-width: 320px;
      max-width:750px;
  }
  nav{
      height: 5rem;
      border-top: 1px solid #dbdbdb;
      border-bottom: 1px solid #dbdbdb;
      clear:both;
  }
  .storeInfo::after{
      content: '';
      display: block;
      clear: both;
  }
  nav ul{
      list-style-type: none;
      padding: 0px;
      margin: 0px;
  }
  nav ul li{
      display: inline-block;
      width: 20%;
      height: 5rem;
      line-height: 5rem;
      text-align: center;
      position: relative;
  }
    nav ul li::after{
      content: '';
      width: 0.8rem;
      height: 0.8rem;
     /*background: #555;*/
     border-right:1px solid #dbdbdb;
     border-bottom: 1px solid #dbdbdb;
     display: none;
    transform: rotate(45deg);
     position: absolute;
     bottom: -0.0564rem;
     left:2.5rem;
  }
  nav ul li.selected::before{
      display: block;
  }
  nav ul li a{
      color: #555;
      font-size: 1.5rem;
      text-decoration: none;
      cursor: pointer;
  }
  .query{
      padding: 0.8rem;
      box-sizing: border-box;
  }
.query .queryInput{
    width: 80%;
    height: 2.5rem;
    border: 1px solid #dbdbdb;
    height: 1.5rem;
    float: left;
    box-sizing: border-box;
}
.query .queryBtn{
    width: 20%;
    height: 2.5rem;
    border: 1px solid #dbdbdb;
    height: 1.5rem;
    float: left;
    box-sizing: border-box;
    text-align: center;
    /*line-height: 2.5rem;*/
}
.products .product{
    border-bottom: 1px solid #dbdbdb;
    box-sizing: border-box;
    padding: 1rem;
}
.products .product .pic{
    width: 30%;
    float: left;
    box-sizing: border-box;
    padding: 1rem;
}
.products .product .pic img{
    width: 100%;

}
.products .product .describe{
    width: 70%;
    float: left;
    box-sizing: border-box;
    padding: 1rem;

}
.products .product .describe span{
display: block;
}
.products .product .describe span.productPrice{
    font-size: 1.3rem;
}
.products .product .describe span.productChann{
    font-size: 1.1rem;
}
    </style>
</head>
<body>
    <header>
        <h1>商铺的全部商品</h1>
    </header>
    <section class="storeInfo scope">
        <img class="storeInfoLeft"  src="./images/store.jpg" alt="商店logo">
        <div class="storeInfoRight">
        <div class="storeInfoName">小快鱼旗舰店</div>
        <div class="storeHonor">商家好评：89% 信用等级：8</div>
        <div class="storeButton">
            <div class="storeContact">联系卖家</div>
            <div class="storeFavor">收藏店铺</div>
            </div> 
         </div>
    </section>
    <nav class="scope">
    <ul>
        <li class="selected"><a href="#">查询</a></li>
        <li> <a href="#">筛选</a> </li>
        <li><a href="#">所有通道</a></li>
    </ul>    
    </nav>
    <section class="query scope">
        <input type="text" class="queryInput">
        <div class="queryBtn">查询</div>
    </section>
    <section class="products scope">
        <section class="product">
            <div class="pic">
                <img src="./images/product1.jpg" alt="">
            </div>
            <div class="describe">
               <span class="productName">Kingston/金士顿 SM2280S3/128G m.22280 SSD笔记本固态硬盘</span>
               <span class="productPrice">$128.00</span>
               <span class="productChannel">所属通道：淘宝商城</span>
            </div>
        </section>
    </section>
    <footer></footer>
</body>
</html>